<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>管理员登录</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box;font-family:'Segue UI','Microsoft YaHei',sans-serif;}
    body{
      background:url('p1.jpg') no-repeat center center fixed;
      background-size:cover;
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      padding:20px;
    }
    .login-container{
      background:rgba(255,255,255,.95);
      border-radius:12px;
      box-shadow:0 10px 30px rgba(0,0,0,.2);
      width:100%;
      max-width:450px;
    }
    .login-header{
      background:#1a2a6c;
      color:#fff;
      padding:20px;
      text-align:center;
      border-radius:12px 12px 0 0;
    }
    .login-header h1{font-size:1.8rem;font-weight:600;margin-top:10px;}
    .login-body{padding:30px;}
    .form-group{margin-bottom:20px;}
    .form-group label{display:block;margin-bottom:8px;font-weight:500;}
    .form-control{
      width:100%;
      padding:12px 15px;
      border:1px solid #ddd;
      border-radius:6px;
      font-size:16px;
      transition:border-color 0.3s;
    }
    .form-control:focus{
      border-color:#1a73e8;
      outline:none;
      box-shadow:0 0 0 2px rgba(26,115,232,0.2);
    }
    .form-control.valid {
      border-color: #4caf50;
    }
    .form-control.invalid {
      border-color: #f44336;
    }
    .input-hint {
      font-size: 12px;
      color: #666;
      margin-top: 5px;
    }
    .btn-group{display:flex;gap:15px;margin-top:25px;}
    .btn{
      flex:1;
      padding:12px;
      border:none;
      border-radius:6px;
      font-size:16px;
      font-weight:600;
      cursor:pointer;
      transition:all 0.3s;
    }
    .btn-primary{
      background:#1a73e8;
      color:#fff;
    }
    .btn-primary:hover{
      background:#0d62d9;
    }
    .btn-secondary{
      background:#f1f3f4;
      color:#5f6368;
    }
    .btn-secondary:hover{
      background:#e3e5e7;
    }
    .error-message{
      color:#d93025;
      font-size:14px;
      margin-top:5px;
      display:none;
    }
    .loading{
      display:none;
      text-align:center;
      margin-top:15px;
    }
    .loading-spinner{
      border:3px solid #f3f3f3;
      border-top:3px solid #1a73e8;
      border-radius:50%;
      width:20px;
      height:20px;
      animation:spin 1s linear infinite;
      margin:0 auto;
    }
    @keyframes spin{
      0%{transform:rotate(0deg);}
      100%{transform:rotate(360deg);}
    }
    @media (max-width:480px){
      .login-body{padding:20px;}
      .btn-group{flex-direction:column;}
    }
  </style>
</head>
<body>
<div class="login-container">
  <div class="login-header">
    <img src="manager.png" height="20%" width="20%" alt="管理员">
    <h1>管理员登录</h1>
  </div>
  <div class="login-body">
    <form id="loginForm">
      <div class="form-group">
        <label for="adminId">工号</label>
        <input type="text" id="adminId" class="form-control" placeholder="请输入5位工号" maxlength="5" required>
        <div class="input-hint">请输入5位工号</div>
        <div class="error-message" id="idError">工号错误，请重新输入</div>
      </div>
      <div class="form-group">
        <label for="adminPwd">密码</label>
        <input type="password" id="adminPwd" class="form-control" placeholder="请输入密码（不少于6位）" required>
        <div class="error-message" id="pwdError">密码错误，请重新输入</div>
      </div>
      <div class="loading" id="loading">
        <div class="loading-spinner"></div>
        <p>正在验证登录信息...</p>
      </div>
      <div class="btn-group">
        <button type="submit" class="btn btn-primary">确认登录</button>
        <button type="reset" class="btn btn-secondary">取消登录</button>
      </div>
    </form>
  </div>
</div>
<script>
  const loginForm = document.getElementById('loginForm');
  const adminIdInput = document.getElementById('adminId');
  const adminPwdInput = document.getElementById('adminPwd');
  const idError = document.getElementById('idError');
  const pwdError = document.getElementById('pwdError');
  const loading = document.getElementById('loading');
  adminIdInput.addEventListener('input', function() {
    const value = this.value;
    this.value = value.replace(/\D/g, '');
    if (value.length === 5) {
      this.classList.remove('invalid');
      this.classList.add('valid');
      idError.style.display = 'none';
    } else {
      this.classList.remove('valid');
      this.classList.add('invalid');
    }
  });
  loginForm.addEventListener('submit', function(event) {
    event.preventDefault();
    const adminId = adminIdInput.value;
    const adminPwd = adminPwdInput.value;
    idError.style.display = 'none';
    pwdError.style.display = 'none';
    if (adminId.length !== 5 || !/^\d+$/.test(adminId)) {
      adminIdInput.classList.add('invalid');
      idError.style.display = 'block';
      adminIdInput.focus();
      return;
    }
    if (adminPwd.length < 6) {
      adminPwdInput.classList.add('invalid');
      pwdError.style.display = 'block';
      adminPwdInput.focus();
      return;
    }
    loading.style.display = 'block';
    setTimeout(() => {
      loading.style.display = 'none';
      window.location.href = 'index.html';
    }, 1500);
  });
  document.querySelector('.btn-secondary').addEventListener('click', function() {
    idError.style.display = 'none';
    pwdError.style.display = 'none';
    loading.style.display = 'none';
    adminIdInput.classList.remove('valid', 'invalid');
    adminPwdInput.classList.remove('invalid');
  });
</script>
</body>
</html>